<template>
	<view class="setting">
		<view class="authorize">
			<view class="bind-item">
				<view class="bind-item-left">
					<text class="iconfont icon-taobao" style="font-size:50rpx;color:#FC4F00;margin-right:18rpx;"></text>
					淘宝账户授权
				</view>
				<view class="go-bindding" v-if="!userInfo.tbUserId" @tap="bangdingTB">
					去授权
					<text class="iconfont icon-xiayiye"></text>
				</view>
				<view class="cancel-bind" v-if="userInfo.tbUserId">
					<view class="go-bindding bindding-ok" style="margin-right:20rpx" v-if="userInfo.tbStatus === 1">
						{{ userInfo.tbAccount }}
					</view>
					<view class="go-bindding" @tap="cancelBangdingTB" v-if="userInfo.tbStatus === 1">
						解绑
						<text class="iconfont icon-xiayiye"></text>
					</view>

					<view class=" go-bindding bindding-ok" v-if="userInfo.tbStatus === 2">
						未实名认证
					</view>
					<view class="go-bindding" v-if="userInfo.tbStatus === 2" @tap="bangdingTB">
						更换绑定
						<text class="iconfont icon-xiayiye"></text>
					</view>

					<view class=" go-bindding bindding-ok" v-if="userInfo.tbStatus === 3">
						授权过期/已解绑
					</view>
					<view class="go-bindding" v-if="userInfo.tbStatus === 3" @tap="bangdingTB">
						重新授权
						<text class="iconfont icon-xiayiye"></text>
					</view>
				</view>
			</view>
			<view class="bind-item">
				<view class="bind-item-left">
					<text class="iconfont icon-zhifubao2" style="font-size:50rpx;color:#1596E8;margin-right:18rpx;"></text>
					支付宝账户绑定
				</view>
				<view class="go-bindding" v-if="!zfbAccount" @tap="$Router.push('/pages/member/zfbAccount')">
					去绑定
					<text class="iconfont icon-xiayiye"></text>
				</view>
				<view class=" go-bindding bindding-ok" v-else @tap="$Router.push('/pages/member/zfbAccount')">{{ zfbAccount }}</view>
			</view>

			<view class="bind-item">
				<view class="bind-item-left">
					<image class="bind-item__img" :src="require('@/static/images/member/icon-phone.svg')"></image>
					手机账户绑定
				</view>
				<view class="go-bindding" v-if="!userInfo.phone" @tap="$Router.push('/pages/member/bindPhone')">
					去绑定
					<text class="iconfont icon-xiayiye"></text>
				</view>
				<view class="go-bindding bindding-ok" v-else>{{ userInfo.phone | phoneMask }}</view>
			</view>
		</view>

		<view class="testing">
			<view class="bind-item" @tap="goUpdate">
				<view class="bind-item-left">
					检测版本
					<text class="tips">({{ version }})</text>
				</view>
				<view class="bindding-ok go-bindding">
					<text :class="isUpdate ? 'active' : ''">{{
						isUpdate ? '新版本更新' : '已是最新版本'
					}}</text>
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<view class="bind-item" @tap="$Router.push('/pages/member/agreement')">
				<view class="bind-item-left">软件使用及服务协议</view>
				<view class="bindding-ok go-bindding">
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<view class="bind-item" @tap="$Router.push('/pages/member/policy')">
				<view class="bind-item-left">隐私政策</view>
				<view class="bindding-ok go-bindding">
					<text class="iconfont icon-xiayiye"></text>
				</view>
			</view>
			<view class="bind-item" @tap="clearStorage">
				<view class="bind-item-left">
					清除缓存
				</view>
				<view class="bindding-ok go-bindding">
					{{ fileSize }}
					<image class="version-img" :src="require('@/static/images/member/icon-del.svg')"></image>
				</view>
			</view>
		</view>

		<view class="quit-btn" @tap="showLogout">退出登录</view>

		<!--授权弹窗-->
		<authorize ref="authorize"></authorize>
		<app-update ref="appUpdate" cancelText="关闭"></app-update>
		<view class="logout-mask" @touchmove.stop.prevent v-if="isLogout">
			<view class="logout-box">
				<view>
					<view class="logout-box__title">提示</view>
					<view class="logout-box__value">确认退出登录吗？</view>
				</view>
				<view class="logout-box__btn">
					<view class="s" @tap="logout">确认</view>
					<view class="c" @tap="isLogout = false">取消</view>
				</view>
			</view>
		</view>

		<!--智能搜索-->
		<ai-search ref="aiSearch"></ai-search>
	</view>
</template>

<script>
	const Alibcsdk = uni.requireNativePlugin('UZK-Alibcsdk');
	import Authorize from '@/components/Authorize';
	import AppUpdate from '@/components/AppUpdate';

	import {
		mapGetters
	} from 'vuex';
	export default {
		components: {
			Authorize,
			AppUpdate
		},
		data() {
			return {
				bindTaobao: true,
				bindYizhifu: false,
				fileSize: '0.0M',
				version: '1.0.0',
				isUpdate: false,
				zfbAccount: '',
				isLogout: false
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
		},
		onShow() {
			this.$nextTick(() => {
				uni.getClipboardData({
					success: res => {
						if (res.data && this.$store.state.common.aiSearch) {
							this.$refs.aiSearch.open(res.data);
							this.$store.commit({
								type: 'setAiSearch',
								aiSearch: false
							});
						}
					}
				});
			});

			this.getZfbinfo();
			// 获取用户信息
			// #ifdef H5
			this.$store.dispatch('getUserInfo', { versionCode: 140 });
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
				let params = { ...wgtinfo };
				this.$store.dispatch('getUserInfo', params);
			});
			// #endif
			this.caluFileSize();
			// #ifdef  APP-PLUS
			this.version = plus.runtime.version;
			this.testingVersion();
			// #endif
		},
		onHide() {
			this.$refs.aiSearch.close();
		},
		methods: {
			// 获取支付宝信息
			getZfbinfo() {
				this.$service.member.aliAccount
					.info()
					.then(res => {
						this.zfbAccount = res.account;
					})
					.catch(err => {
						// uni.showToast({
						// 	title: err.message,
						// 	icon: 'none'
						// });
					});
			},
			// 计算缓存大小
			caluFileSize() {
				plus.cache.calculate(size => {
					let sizeCache = parseInt(size);
					if (sizeCache == 0) {
						this.fileSize = '0B';
					} else if (sizeCache < 1024) {
						this.fileSize = sizeCache + 'B';
					} else if (sizeCache < 1048576) {
						this.fileSize = (sizeCache / 1024).toFixed(2) + 'KB';
					} else if (sizeCache < 1073741824) {
						this.fileSize = (sizeCache / 1048576).toFixed(2) + 'MB';
					} else {
						this.fileSize = (sizeCache / 1073741824).toFixed(2) + 'GB';
					}
				});
			},
			// 清除文件缓存
			clearStorage() {
				uni.showLoading({
					title: '正在清理中...'
				});
				let os = plus.os.name;
				if (os === 'Android') {
					let main = plus.android.runtimeMainActivity();
					let sdRoot = main.getCacheDir();
					let files = plus.android.invoke(sdRoot, 'listFiles');
					let len = files.length;
					for (let i = 0; i < len; i++) {
						let filePath = '' + files[i];
						plus.io.resolveLocalFileSystemURL(
							filePath,
							entry => {
								if (entry.isDirectory) {
									// 递归删除其下的所有文件及子目录
									entry.removeRecursively(
										entry => {
											uni.hideLoading();
											uni.showToast({
												title: '缓存清理完成',
												duration: 2000
											});

											// 重新计算缓存
											this.caluFileSize();
										},
										e => {
											uni.hideLoading();
											uni.showToast({
												title: e.message,
												icon: 'none'
											});
										}
									);
								} else {
									uni.hideLoading();
									entry.remove();
								}
							},
							e => {
								uni.hideLoading();
								uni.showToast({
									title: '文件路径读取失败',
									icon: 'none'
								});
							}
						);
					}
				} else {
					plus.cache.clear(() => {
						uni.hideLoading();
						uni.showToast({
							title: '缓存清理完成',
							duration: 2000
						});
						this.caluFileSize();
					});
				}
			},
			bangdingTB() {
				this.$refs.authorize.open();
			},
			cancelBangdingTB() {
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: '确认解绑？',
					success: function(res) {
						if (res.confirm) {
							that.$service.shopping.taobao
								.unBind({
									tbUserId: that.userInfo.tbUserId
								})
								.then(() => {
									uni.showToast({
										title: '解绑成功',
										icon: 'none'
									});

									Alibcsdk.init(initResult => {
										console.log(JSON.stringify(initResult));
										if (initResult.status) {
											Alibcsdk.logout(result => {
												if (result.status) {
													that.$store.dispatch('getUserInfo');
												}
											});
										} else {
											uni.showToast({
												title: '初始化失败'
											});
										}
									});
								})
								.catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									});
								});
						}
					}
				});
			},
			testingVersion() {
				// #ifdef  APP-PLUS
				let version = plus.runtime.version;
				let params = {};
				if (uni.getSystemInfoSync().platform == 'android') {
					params.os = 1;
				} else if (uni.getSystemInfoSync().platform == 'ios') {
					params.os = 0;
				}
				params.version = version
				this.$service.common.version
					.latestV(params)
					.then(res => {
						if (res.status === 1) {
							this.isUpdate = true;
						} else {
							this.isUpdate = false;
						}
					})
					.catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						});
					});
				// #endif
			},
			goUpdate() {
				// #ifdef  APP-PLUS
				if (this.isUpdate) {
					this.$store.state.common.appUpdate = true;
					this.$refs['appUpdate'].getServerNo(1);
				}
				// #endif
			},
			showLogout() {
				this.isLogout = true;
			},
			logout() {
				this.$service.member.userHf
					.logout()
					.then(res => {
						uni.showToast({
							title: '退出登录成功',
							icon: 'none'
						});
						uni.removeStorageSync('token');
						// 清空用户信息
						this.$store.dispatch('clearUserInfo');
						setTimeout(() => {
							this.$Router.pushTab('/pages/index/index');
						}, 800);
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
					
					
				let all;
				let Service;
				plus.oauth.getServices(
					Services => {
						all = Services;
						Object.keys(all).some(key => {
							if (all[key].id == 'weixin') {
								Service = all[key];
							}
						});
						Service.logout((e) => {
							
						}, function(e){
							console.log("注销登录认证失败: "+JSON.stringify(e));
						});
					})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.setting {
		background: #f6f7fa;
		height: 100vh;
		font-size: 28rpx;

		.authorize,
		.testing {
			margin-top: 20rpx;
		}

		.bind-item {
			width: 100%;
			height: 100rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			padding: 0 32rpx;
			@include flexBox(space-between, center);

			&__img {
				width: 50rpx;
				height: 50rpx;
				margin-right: 18rpx;
			}

			.version-img {
				width: 28rpx;
				height: 28.5rpx;
				margin-left: 10rpx;
			}

			.bind-item-left {
				color: #221d2c;
				font-size: 28rpx;
				@include flexBox(flex-end, center);

				.tips {
					color: #86828c;
					margin-left: 20rpx;
				}
			}

			.t-icon {
				/* prettier-ignore */
				font-size: 25rpx;
				margin-right: 18rpx;
			}

			.go-bindding {
				@include flexBox(center, center);
				color: $main-color;

				.icon {
					font-size: 18rpx;
				}
			}

			.bindding-ok {
				color: #717076;

				.active {
					color: #0160f7;
				}
			}

			.cancel-bind {
				display: flex;
			}
		}

		.quit-btn {
			width: 576rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #f70114;
			border-radius: 40rpx;
			font-size: 28rpx;
			text-align: center;
			color: #ffffff;
			font-weight: 400;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 50rpx;
			margin: auto;
		}

		.logout-mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999;

			.logout-box {
				width: 536rpx;
				height: 258rpx;
				background: #ffffff;
				border-radius: 28rpx;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				text-align: center;
				overflow: hidden;
				@include flexBox(space-between, center, column);

				&__title {
					margin-top: 32rpx;
					font-size: 34rpx;
				}

				&__value {
					margin-top: 12rpx;
					font-size: 26rpx;
				}

				&__btn {
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					border-top: 1rpx solid #bdbdbf;
					color: #007aff;
					font-size: 34rpx;
					display: flex;

					.s {
						flex: 1;
						border-right: 1rpx solid #bdbdbf;
					}

					.c {
						flex: 1;
					}
				}
			}
		}
	}
</style>
